import React from 'react'
import { Carousel, Flex, Grid, WingBlank, NavBar, Icon } from 'antd-mobile'
import './index.scss'
// import axios from 'axios'
// 导入菜单图标
import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'
// 导入后台图片的基准地址
import { IMG_BASE_URL } from '../../utils/config.js'

// axios.defaults.baseURL = 'http://localhost:8888'
import request from '../../utils/api.js'

import getCurrentCity from '../../utils/localtion.js'

class Index extends React.Component {

    state = {
        swiperData: [],
        groupData: [],
        newsData: [],
        isLoaded: false,
        currentCity: ''
    }

    // 获取轮播图数据
    loadSwiper = async () => {
        // let res = await axios.get('/home/swiper')
        let res = await request({
            method: 'get',
            url: '/home/swiper'
        })
        this.setState({
            swiperData: res.body
        })
    }

    // 获取租房小组数据
    loadGroup = async () => {
        // let res = await axios.get('/home/groups')
        let res = await request({
            method: 'get',
            url: '/home/groups'
        })
        this.setState({
            groupData: res.body
        })
    }

    // 获取最新资讯数据
    loadNews = async () => {
        // let res = await axios.get('/home/news')
        let res = await request({
            method: 'get',
            url: '/home/news'
        })
        this.setState({
            newsData: res.body
        })
    }

    componentDidMount () {
        this.loadSwiper()
        this.loadGroup()
        this.loadNews()
        // 获取当前城市名称
        getCurrentCity().then(city => {
            this.setState({
                currentCity: city.label
            })
        })
        // let city = localStorage.getItem('hkzf_city')
        // if (city) {
        //   city = JSON.parse(city)
        //   this.setState({
        //     currentCity: city.label
        //   })
        // }
    }

    // 动态生成录播图条目
    renderSwiper = () => {
        const swiperTag = this.state.swiperData.map((item, index) => (
            <img
                onLoad={() => {
                    // 窗口尺寸变化时->触发resize事件->重新设置动态高度
                    window.dispatchEvent(new Event('resize'))
                    // 告诉轮播组件可以自动轮播了
                    this.setState({
                        isLoaded: true
                    })
                }}
                src={`${IMG_BASE_URL}${item.imgSrc}`} alt="" key={item.id}/>
        ))
        return (
            <Carousel
                autoplay={this.state.isLoaded}
                autoplayInterval={2000}
                infinite={true}
            >
                {swiperTag}
            </Carousel>
        )
    }

    // 动态生成菜单布局
    renderMenu = () => {
        let menuData = [{
            id: 1,
            name: '整租',
            icon: nav1
        }, {
            id: 2,
            name: '合租',
            icon: nav2
        }, {
            id: 3,
            name: '地图找房',
            icon: nav3
        }, {
            id: 4,
            name: '去出租',
            icon: nav4
        }]
        const menuTag = menuData.map(item => (
            <Flex.Item key={item.id} onClick={() => {
                if (item.id === 4) {
                    // 点击去出租按钮进行跳转
                    this.props.history.push('/rent/add')
                }
            }}>
                <img src={item.icon} alt=""/>
                <p>{item.name}</p>
            </Flex.Item>
        ))
        return (
            <Flex>
                {menuTag}
            </Flex>
        )
    }

    // 动态生成租房小组布局
    renderGroup = () => {
        return (
            <div className="group">
                <Flex className="group-title" justify="between">
                    <h3>租房小组</h3>
                    <span>更多</span>
                </Flex>
                <Grid
                    data={this.state.groupData}
                    columnNum={2}
                    square={false}
                    renderItem={item => (
                        <Flex className="grid-item" justify="between">
                            <div className="desc">
                                <h3>{item.title}</h3>
                                <p>{item.desc}</p>
                            </div>
                            <img src={`${IMG_BASE_URL}${item.imgSrc}`} alt="" />
                        </Flex>
                    )}
                />
            </div>
        )
    }

    renderNews = () => {
        const newsTag = this.state.newsData.map(item => (
            <div className="news-item" key={item.id}>
                <div className="imgwrap">
                    <img
                        className="img"
                        src={`${IMG_BASE_URL}${item.imgSrc}`}
                        alt=""
                    />
                </div>
                <Flex className="content" direction="column" justify="between">
                    <h3 className="title">{item.title}</h3>
                    <Flex className="info" justify="between">
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                    </Flex>
                </Flex>
            </div>
        ))
        return (
            <div className="news">
                <h3 className="group-title">最新资讯</h3>
                <WingBlank>{newsTag}</WingBlank>
            </div>
        )
    }

    // 渲染顶部导航
    renderNavbar = () => {
        return (
            <NavBar
                mode="dark"
                icon={this.state.currentCity}
                onLeftClick={() => {
                    // 跳转到选择城市页面
                    this.props.history.push('/citylist')
                }}
                rightContent={[
                    <Icon onClick={() => {
                        this.props.history.push('/map')
                    }} key="1" type="ellipsis" />,
                ]}
            >主页</NavBar>
        )
    }

    render () {
        return (
            <div className='menu'>
                {/*顶部导航*/}
                {this.renderNavbar()}
                {/*顶部轮播图*/}
                {this.renderSwiper()}
                {/*导航菜单*/}
                {this.renderMenu()}
                {/*租房小组*/}
                {this.renderGroup()}
                {/*最新资讯*/}
                {this.renderNews()}
            </div>
        )
    }
}

export default Index